<template>
  <section class="tabBar-wrap">
    <article class="tabBar-box">
      <ul class="tabBar-nav" v-if="navList.length > 0">
        <li
          class="item"
          v-for="(item, index) in navList"
          @click="selectNavItem(index,item.pagePath)"
          :key="index"
        >
          <p class="item-images">
            <img
              :src="selectNavIndex === index ? item.selectedIconPath : item.iconPath"
              alt="iconPath"
            />
          </p>
          <p
            :class="selectNavIndex === index ? 'item-text item-text-active-dis' : 'item-text' "
          >{{item.text}}</p>
        </li>
        <li v-if="needButton" style="flex: 1">
          <div class="submit-box">
            <img
              :src="themeImg"
              @click="bindNavigateTo('/pages/home/index/main')"
              mode="widthFix"
              class="imgLinkBtn"
            />
          </div>
        </li>
      </ul>
    </article>
  </section>
</template>

<script>
export default {
  props: ['selectNavIndex', 'needButton'],
  data () {
    return {
      navList: [
        {
          pagePath: '/pages/shop-management/dis/index/main',
          text: '分销市场',
          iconPath: '/static/assets/icon/fenxiap@2x.png',
          selectedIconPath: '/static/assets/icon/market@2x.png'
        },
        // {
        //   pagePath: '/pages/shop-management/dis/bazaar/main',
        //   text: '分类',
        //   iconPath: '/static/assets/icon/weixuanzhongfenlei@2x.png',
        //   selectedIconPath: '/static/assets/icon/fenleixiuzhong@2x.png'
        // },
        {
          pagePath: '/pages/shop-management/dis/my-dis-shop/main',
          text: '我的分销',
          iconPath: '/static/assets/icon/wodefenxioa@2x.png',
          selectedIconPath: '/static/assets/icon/xuanzhmwode@2x.png'
        }
      ]
    }
  },
  computed: {
    themeImg () {
      let appId = this.$store.state.appId
      if (appId !== 'wx657f1b2fb50b5be3') {
        return 'https://akk.028wkf.cn/kdb-weapp-img/new-kdb-xcx/icon/qudianpu@3x.png'
      } else {
        return 'https://akk.028wkf.cn/kdb-weapp-img/new-kdb-xcx/icon/qudianpu@3x2.png'
      }
    }
  },
  created () {},
  methods: {
    /**
     * 点击导航栏
     * @param index
     */
    selectNavItem (index, pagePath) {
      if (index === this.selectNavIndex) {
        return false
      }

      if (index === 0 && this.selectNavIndex === -1) {
        this.$emit('fetch-index')
      }
      this.bindViewTap(pagePath)
    },

    /**
     * 路由跳转
     */
    bindNavigateTo (url) {
      wx.switchTab({
        url
      })
    },

    /**
     * tabBar路由跳转
     */
    bindViewTap (url) {
      wx.switchTab({
        url
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.tabBar-box {
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 50px;
  // padding: 20px 0;
  border-top: 1px solid #eee;
  background-color: #f8f8f8;
}
.tabBar-nav {
  width: 100%;
  height: 50px;
  display: flex;
  align-items: center;
  .item {
    // flex: 1;
    width: 33%;
    text-align: center;
    position: relative;
    z-index: 2;
  }
  .item-text {
    color: #666;
    font-size: 14px;
    transition: 0.24s linear;
  }
  .item-text-active-shop {
    color: #626ffd;
  }
  .item-text-active-dis {
    color: #ea412d;
  }
  .item-images {
    width: 22px;
    height: 22px;
    margin: 0 auto;
    text-align: center;
    transition: 0.24s linear;
    & img {
      display: inline;
    }
  }
}
.submit-box {
  position: relative;
  .imgLinkBtn {
    position: absolute;
    width: 300%;
    height: 40px;
    right: 0;
    bottom: 0;
    top: 50%;
    transform: translate(0, -50%);
  }
}
</style>
